<template>
<!-- #ifdef MP-WEIXIN -->
<view>	
	<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
		<view class="u-m-r-10" style="margin: 0 auto!important;margin-top: 35px!important;text-align: center;">
			
			<button open-type="getUserInfo"	 @getuserinfo="login" v-if="!isLogin">
				<u-avatar  :src="pic" size="140"></u-avatar>
				<view >
					点击登录
				</view>
			</button>
			<view v-else class="userAvatarUrl">
				<open-data type="userAvatarUrl" v-if="!isLogin.avatar"></open-data>
				<u-avatar  :src="isLogin.avatar" size="140"></u-avatar>
			</view>
		</view>
	</view>
	
	<view class="u-m-t-20">
		<u-cell-group>
			<u-cell-item icon="rmb-circle" @click="userinfo" title="个人资料"></u-cell-item>
		</u-cell-group>
	</view>
	
	<view class="u-m-t-20">
		<u-cell-group>
			<u-cell-item icon="star" title="我的订单"></u-cell-item>
			<u-cell-item icon="photo" title="相册"></u-cell-item>
			<u-cell-item icon="coupon" title="卡券"></u-cell-item>
			<u-cell-item icon="heart" title="关注"></u-cell-item>
		</u-cell-group>
	</view>
	
	<view class="u-m-t-20">
		<u-cell-group>
			<u-cell-item icon="setting" title="退出"></u-cell-item>
		</u-cell-group>
	</view>
</view>
<!-- #endif -->

<!-- h5端和app端 -->
<!-- #ifdef H5 || APP-PLUS -->
<view v-if="isLogin.token">	
	<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">	
		<view class="u-m-r-10" style="margin: 0 auto!important;margin-top: 35px!important;text-align: center;">
			<view  class="userAsvatarUrl" v-if="isLogin">
				<u-avatar v-if="isLogin.avatar" :src="'http://www.travelapi.com/storage/' + isLogin.avatar" size="140"></u-avatar>
				<u-avatar v-else  :src="isLogin.avatar" size="140"></u-avatar>
			</view>
		</view>
	</view>
	
	<view class="u-m-t-20">
		<u-cell-group>
			<u-cell-item icon="rmb-circle" @click="userinfo" title="个人资料"></u-cell-item>
		</u-cell-group>
	</view>
	
	<view class="u-m-t-20">
		<u-cell-group>
			<u-cell-item icon="star" title="我的订单"></u-cell-item>
			<u-cell-item icon="photo" title="相册"></u-cell-item>
			<u-cell-item icon="coupon" title="卡券"></u-cell-item>
			<u-cell-item icon="heart" title="关注"></u-cell-item>
		</u-cell-group>
	</view>
	
	<view class="u-m-t-20">
		<u-cell-group>
			<u-cell-item icon="setting" title="退出"></u-cell-item>
		</u-cell-group>
	</view>
</view>
<view v-else class="content">
    <view class="header">
      <image src="../../static/shilu-login/logo.png"></image>
    </view>

    <view class="list">
      <view class="list-call">
        <image class="img" src="/static/shilu-login/1.png"></image>
        <input class="sl-input" v-model="phone" type="number" maxlength="11" placeholder="输入手机号" />
      </view>
      <view class="list-call">
        <image class="img" src="/static/shilu-login/2.png"></image>
        <input class="sl-input" v-model="password" type="text" maxlength="32" placeholder="输入密码" password="true" />
      </view>

    </view>
    <view class="button-login" hover-class="button-hover" @tap="bindLogin()">
      <text>登录</text>
    </view>

    <view class="agreenment">
      <navigator url="/user/register/register" open-type="navigate">忘记密码</navigator>
      <text>|</text>
      <navigator url="/user/register/register" open-type="navigate">注册账户</navigator>
    </view>
</view>
<!-- #endif -->
</template>

<script>
	export default {
		data() {
			return {
				isLogin:uni.getStorageSync("userkey"),
				phone: '',
				password: ''
			}
		},
		methods:{
			
			userinfo(){
				this.$u.route({
					type:"navigateTo",
					url:"user/userinfo/userinfo"
				})
			},
			// #ifdef MP-WEIXIN		
			 login(e){
				 var that = this
				if(e.detail.errMsg == "getUserInfo:ok"){
					uni.login({
						provider:"weixin",
						async success(e) {
							let login =  await that.$u.proxy.user.login({
								code:e.code
							})
							if(login.success){
								uni.setStorageSync("userkey",login.data)
								
								that.$u.route({
									type:"reLaunch",
									url: 'pages/my/my',
								})							
							}else if(login.data.code == "202"){
								
								that.$u.route({
									type:"navigateTo",
									url:"user/binduser/binduser"
								})
							}

						}
					})
				}
			},
			// #endif
			
			
			// #ifdef H5 || APP-PLUS
			async bindLogin() {
				if (!(/^1[3456789]\d{9}$/.test(this.phone))) {
				  uni.showToast({
					icon: 'none',
					title: '请填写正确的手机号码'
				  });
				  return;
				  
				}
				if (this.password.length < 6) {
				  uni.showToast({
					icon: 'none',
					title: '请填写六位数以上的密码'
				  });
				  return;
				}
				
				let login =  await this.$u.proxy.user.login({
					password:this.password,
					phone:this.phone
				})
				
				if(login.success){
					//跳转
					uni.setStorageSync("userkey",login.data)
					this.$u.route({
						type:"reLaunch",
						url: 'pages/my/my',
					})
				}else{
				  uni.showToast({
					icon: 'none',
					title: login.msg
				  });			
				}
				
			  }
			// #endif
		},
		onReady() {
			// #ifdef H5 || APP-PLUS
			uni.setNavigationBarTitle({
				
			    title: this.isLogin.token ? '个人中心':'登录'
			});
			// #endif
		}
	} 
</script>  
 
<style lang="scss">
button{
	padding: 0;
	line-height: 16px;
	background:none;
	border: none;
	font-size: 26rpx;
	background-color: transparent!important;
}
button::after{
	width: auto;
	height: auto;
	border: none;
}
.userAvatarUrl{
	border-radius: 50%;
	overflow: hidden;
	width: 200rpx;
	height: 200rpx;
}
open-data{
	width: 100%;
	height: 100%;
}

//h5端和app端 
// #ifdef H5 || APP-PLUS
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.header {
width: 161rpx;
height: 161rpx;
background: rgba(63, 205, 235, 1);
box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
border-radius: 50%;
margin-top: 30rpx;
margin-left: auto;
margin-right: auto;
}

.header image {
width: 161rpx;
height: 161rpx;
border-radius: 50%;
}

.list {
display: flex;
flex-direction: column;
padding-top: 50rpx;
padding-left: 70rpx;
padding-right: 70rpx;
}

.list-call {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100rpx;
color: #333333;
border-bottom: 0.5px solid #e2e2e2;
}

.list-call .img {
width: 40rpx;
height: 40rpx;
}

.list-call .sl-input {
flex: 1;
text-align: left;
font-size: 32rpx;
margin-left: 16rpx;
}

.button-login {
color: #FFFFFF;
font-size: 34rpx;
width: 470rpx;
height: 100rpx;
background: linear-gradient(-90deg, rgba(63, 205, 235, 1), rgba(188, 226, 158, 1));
box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
border-radius: 50rpx;
line-height: 100rpx;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 100rpx;
}

.button-hover {
background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
}

.agreenment {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 30rpx;
margin-top: 80rpx;
color: #FFA800;
text-align: center;
height: 40rpx;
line-height: 40rpx;
}

.agreenment text {
font-size: 24rpx;
margin-left: 15rpx;
margin-right: 15rpx;
}
// #endif
</style>